<template>
  <div>
    <div class="swiper">
        <swiper :options="swiperOption" class="swiper-list">
          <swiper-slide v-for="item of swiperImgs" :key="item.id">
            <router-link to="/pushimg">
              <img :src="item.imgUrl" alt="">
            </router-link>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        swiperImgs: [
          {
            id: "01",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_350x240_34a3d53e.jpg"
          }, {
            id: "02",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/2c/2ccb513f255467c790.img.jpg_350x240_c4748af3.jpg"
          }, {
            id: "03",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/31/31c5fd163f89ea1590.img.jpg_350x240_92ea3f45.jpg"
          }, {
            id: "04",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/de/de8400021b664c5390.img.jpg_350x240_9694a701.jpg"
          }, {
            id: "05",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/22/22f29ed15b46fcb490.img.jpg_350x240_895df26d.jpg"
          }, {
            id: "06",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/14/14670522ef55e07a90.img.jpg_350x240_2d6a0fdc.jpg"
          }, {
            id: "07",
            imgUrl: "http://img1.qunarzz.com/sight/p0/1602/c4/c47ce894cf0bc97d90.img.jpg_350x240_089c22b8.jpg"
          }
        ],
        swiperOption: {
          pagination: {
            el: '.swiper-pagination',
            type: 'fraction'
          },
          loop: true
        }
      }
    }
  }
</script>
<style scoped>
  .swiper {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #000000;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
  }

  .swiper-list {
    flex: 1;
  }

  .swiper .swiper-slide {
    width: 100%;
  }

  .swiper-container img {
    width: 100%;
  }

  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets img {
    width: 100%;
    display: block;
  }

  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets span {
    font-size: .14rem;
    color: #fff;
  }
</style>
